import React, { memo } from "react";
import {
    PlusOutlined,
    MinusOutlined,
    MinusSquareOutlined,
    PlusSquareOutlined,
} from "@ant-design/icons";
import { Popconfirm } from "antd";
export type onAddAndDelType = (
    type: "add" | "del" | "delAll",
    index: number
) => void;
interface IProps {
    isAdd?: boolean;
    isDel?: boolean;
    onAddAndDel?: onAddAndDelType;
    index: number;
}

const ColumnAddDel: React.FC<IProps> = ({
    isAdd,
    isDel,
    onAddAndDel,
    index,
}) => {
    return (
        <>
            {isAdd ? (
                <div>
                    <PlusOutlined
                        title="新增一行"
                        onClick={() => {
                            onAddAndDel && onAddAndDel("add", index);
                        }}
                    />
                </div>
            ) : null}
            {isDel ? (
                <div>
                    <Popconfirm
                        title="确定删除吗？"
                        onConfirm={() =>
                            onAddAndDel && onAddAndDel("del", index)
                        }>
                        <MinusOutlined title="删除一行" />
                    </Popconfirm>
                </div>
            ) : null}
        </>
    );
};
interface IDelAllProps {
    onAddAndDel?: onAddAndDelType;
}
export const ColumnDelAll: React.FC<IDelAllProps> = memo(({ onAddAndDel }) => {
    return (
        <Popconfirm
            title="确定删除所有吗？"
            onConfirm={() => onAddAndDel && onAddAndDel("delAll", 0)}>
            <MinusSquareOutlined title="删除所有行" />
        </Popconfirm>
    );
});

interface IAddProps {
    onAddAndDel?: onAddAndDelType;
}
export const ColumnAdd: React.FC<IAddProps> = memo(({ onAddAndDel }) => {
    return (
        <PlusSquareOutlined
            title="增加一行"
            onClick={() => onAddAndDel && onAddAndDel("add", 0)}
        />
    );
});

export default memo(ColumnAddDel);
